import React, { useRef  } from 'react'
import { nanoid } from 'nanoid'
import { connect } from 'react-redux'
import { createAddList } from '../redux/action/person' 

function Person(props) {
  // console.log(props); 
  let name = useRef()
  let age = useRef()
  const addInfo = () => {
    let nameNode = name.current.value
    let ageNode = age.current.value
    name.current.value = ''
    age.current.value = ''
    if (ageNode && ageNode) {  props.addlist({  id: nanoid(), name: nameNode, age: ageNode })
    } else {
      alert("请填写表单")
    } 
  }
  return (
    <div>
      <input ref={name} type="text" /> &nbsp; <span>count:{props.he}</span> <br />
      <input ref={age} type="text" /> 
      <button onClick={addInfo}>添加</button>
      <ul>
        {
          props.list.map((ite, ind) => <li key={ind}>姓名：{ite.name} --- 年龄：{ite.age} </li>)
        }
      </ul>
    </div>
  )
}  

export default connect(
  state => ({ he: state.he, list: state.addPerson }),  
  {
    addlist: createAddList
  }
)(Person)